<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="../common/jspcommon.jsp"%>
 
<script type="text/javascript">

	$(document).ready(function() {
		
		//绑定回车事件
		$(':input').bind('keyup', function(event){
		   if (event.keyCode=="13"){
			   saveDetail();
		   }
		});
		
		$.metadata.setType("attr","validate");
		$("#base_info_form").validate();
	}); 

	function addSpecial() {
		$("#experTable").append($("#geXinZiLiao").html());
	}
	
	function deleteSpecial(id) {
		$("#" + id + "").remove();
	}
	
	function saveDetail() {
		if($("#blood").val()=="00"){
			$("#errorBlood").html("请选择血型");
			return;
		}else if($("#constellation").val()=="00"){
			$("#errorConstellation").html("请选择星座");
			return;
		}
		if($("#base_info_form").valid()){
			var flag = false;
			var arrayObj = new Array();
			//清除所有报错信息
			$(".personality_list_table").find("#errorNotice").html("");
			//验证每条信息
			$(".personality_list_table").each(function() {
				if($(this).find("#specialName").val().length>20){
					$(this).find("#errorNotice").html("标题不能超过20个字符");
					flag = true;
				}else if($(this).find("#specialValue").val().length>50){
					$(this).find("#errorNotice").html("内容不能超过50个字符");
					flag = true;
				}
				arrayObj.push({
					"id":$(this).find("#specialId").val(),
					"name" : $(this).find("#specialName").val(),
					"value" : $(this).find("#specialValue").val()
				});
			});
			if(flag){
				return;
			}
			var detail = new DetailAll();
			detail.blood = $("#blood").val();
			detail.constellation = $("#constellation").val();
			detail.profile = $("#profile").val();
			detail.introduction = $.trim($("#introduction").val());
			detail.personalityList = arrayObj;
			$("#delButton").attr("onclick","");
			$.ajax({
						type : 'post',
						url : 'saveDetail.htm?memberId='+$("#memberId").html(),
						data : {
							jsonData : escape($.toJSON(detail))
						},
						success : function(data) {
							if (data == 'success') {
								$("#member_info_detail").load("memberSpecial.htm?memberId="+$("#memberId").html(),function(){
									showSuccess();
									window.scrollTo(0,0);
								});
								$("#gxzl3").attr("class", "current");
							} 
						}
					});
		}
	}

	function tiMao(value, label) {
		$("#profileV").val(label);
		$("#profile").val(value);
		$(".i-list").slideUp();
	}

	$("#closeTiMao").click(function() {
		$(".i-list").slideUp();
	});
	
	$("#profileV").focus(function() {
		$(this).blur();
		$(".i-list").show();
	});
	
	$("#tiMao").mouseleave(function(){
		$(".i-list").hide();
	});
	
	//小试牛刀
	function hideTitleError(self){
		$(self).parent().parent().find("#errorNotice").html("");
	}
	function showTitleError(self){
		if($(self).val().length>20){
			$(self).parent().parent().find("#errorNotice").html("标题不能超过20个字符");
		}else if($(self).parent().parent().find("#specialValue").val().length>50){
			$(self).parent().parent().find("#errorNotice").html("内容不能超过50个字符");
		}
	}
	function hideContentError(self){
		$(self).parent().parent().find("#errorNotice").html("");
	}
	function showContentError(self){
		if($(self).val().length>50){
			$(self).parent().parent().find("#errorNotice").html("内容不能超过50个字符");
		}else if($(self).parent().parent().find("#specialName").val().length>20){
			$(self).parent().parent().find("#errorNotice").html("标题不能超过20个字符");
		}
	}
	
</script>
<style type="text/css">
	.error{
		color: red;
	}
</style>
 
<div class="success" id="base_info_tip_success" style="display: none; margin-left: 32px;"><img alt="修改成功" src="<%=basePath %>images/home_images/ico29.png">个性资料修改成功</div>
<form action="" id="base_info_form">
	<div class="h_PI">
		<table >
			<tr>
				<td width="84" class="PI_text">血型：</td>
				<td width="435"><select name="blood" id="blood">
						<option value="00">请选择</option>
						<c:forEach items="${bloodList}" var="blood">
							<option value="${blood.value}"
								<c:if test="${blood.value==detail.blood}">SELECTED</c:if>>${blood.label}</option>
						</c:forEach>
				</select>
				<div id="errorBlood" style="color: red; display: inline;"></div>
				</td>
			</tr>
			<tr>
				<td class="PI_text">星座：</td>
				<td><select name="constellation" id="constellation">
						<option value="00">请选择</option>
						<c:forEach items="${constellationList}" var="constellation">
							<option value="${constellation.value}"
								<c:if test="${constellation.value==detail.constellation}">SELECTED</c:if>>${constellation.label}</option>
						</c:forEach>
				</select>
				<div id="errorConstellation" style="color: red; display: inline;"></div>
				</td>
			</tr>
			<tr>
				<td class="PI_text">体貌：</td>
				<td>
					<ul class="PI_text_window" id="tiMao">
						<li class="sidelist"><input type="text" validate="{required:true,messages:{required:'请选择体貌'}}" value=""
							name="profileV" id="profileV" /> <input type="hidden" name="profile" id="profile">
							<ul class="i-list">
								<li class="i-list_Bg"><img
									src="<%=basePath%>images/home_images/PI_windowBG.gif" alt="箭头" />
								</li>
								<li class="i-list_text"><c:forEach items="${profileList}"
										var="profile">
										<c:if test="${profile.value==detail.profile }">
											<script>
											document.getElementById("profileV").value = "${profile.label}";
											document.getElementById("profile").value = "${profile.value}";
											</script>
										</c:if>
										<a href="javascript:void(0);"
											onclick="tiMao('${profile.value}','${profile.label }')">${profile.label}</a>
									</c:forEach></li>
								<li class="i-list_close"><input type="button"
									id="closeTiMao" value="关闭" /></li>
							</ul>
						</li>
					</ul></td>
			</tr>
			<tr>
				<td class="PI_text">我的简介：</td>
				<td><textarea id="introduction" name="introduction" validate="{required:true,maxlength:50,messages:{required:'我的简介不能为空',maxlength:'长度不能超过50个字符'}}" class="info_text"><c:out value="${detail.introduction}"></c:out></textarea>
				</td>
			</tr>
		</table>
		<table id="experTable">
			<c:forEach items="${detail.personalityList}" var="personality"
				varStatus="v">
				<tr class="personality_list_table" id="${v.index}">
					<td>
					<input type="hidden" id="specialId" value="${personality.id}" />
					<input type="text" name="specialName" onfocus="hideTitleError(this)" onblur="showTitleError(this)" class="PI_category" id="specialName" value="${personality.name}" />：
					</td>
					<td>
					<input type="text" class="PI_content" onfocus="hideContentError(this)" onblur="showContentError(this)" id="specialValue" name="specialValue" value="<c:out value="${personality.value}"></c:out>"/>
					<span style="cursor: pointer;" onclick="deleteSpecial('${v.index}')">删除</span>
					<div style="color: red; display: inline;" id="errorNotice"></div>
					</td>
				</tr>
			</c:forEach>
		</table>
		<table>
		<tr>
				<td></td>
				<td class="add_news"><img
					src="<%=basePath%>images/home_images/HI_01.gif" alt="添加个性信息" /> <a
					href="javascript:void(0);" onclick="addSpecial()">添加个性信息</a>
				</td>
			</tr>
		</table>
	</div>
	<table>
        <tr>
          <td width="145"></td>
          <td width="524">
          <div class="h_button w75 mt15"><strong id="delButton" onclick="saveDetail()" >保存设置</strong></div>
        </td>
        </tr>
      </table>
</form>
      <table  style="display: none;" id="geXinZiLiao">
      	<tr class="personality_list_table">
			<td><input type="hidden" id="specialId" value="" />
			<input type="text" class="PI_category" id="specialName" onfocus="hideTitleError(this)" onblur="showTitleError(this)" name="specialName" />：
			</td>
			<td>
			<input type="text" class="PI_content" id="specialValue" onfocus="hideContentError(this)" onblur="showContentError(this)" name="specialValue" />
			<div style="color: red; display: inline;" id="errorNotice"></div>
			</td>
		</tr>
	</table>
